<!--<template>-->
<!--  <div class="pdf-preview-container">-->
<!--    <canvas ref="pdfCanvas"></canvas>-->

<!--    &lt;!&ndash; 分页控制 &ndash;&gt;-->
<!--    <div class="pdf-controls" v-if="pageCount > 1">-->
<!--      <el-button-group>-->
<!--        <el-button-->
<!--          size="mini"-->
<!--          @click="prevPage"-->
<!--          :disabled="pageNum <= 1"-->
<!--          icon="el-icon-arrow-left"-->
<!--        ></el-button>-->
<!--        <el-button size="mini">{{ pageNum }} / {{ pageCount }}</el-button>-->
<!--        <el-button-->
<!--          size="mini"-->
<!--          @click="nextPage"-->
<!--          :disabled="pageNum >= pageCount"-->
<!--          icon="el-icon-arrow-right"-->
<!--        ></el-button>-->
<!--      </el-button-group>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->
<template>
  <div class="pdf-preview">
    <!-- 改为循环渲染多个canvas -->
    <div v-for="page in pages" :key="page.pageNumber">
      <canvas :ref="`pdfCanvas-${page.pageNumber}`" />
    </div>
  </div>
</template>
<script>
import * as pdfjsLib from 'pdfjs-dist'
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker
export default {
  props: {
    fileUrl: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      pdfDoc: null,
      pageNum: 1,
      pageCount: 0,
      pages: [], // 存储所有页面信息
      scale: 1.2
    }
  },
  watch: {
    fileUrl() {
      this.loadPDF()
    }
  },
  mounted() {
    this.loadPDF()
  },
  methods: {
    async loadPDF() {
      try {
        const loadingTask = pdfjsLib.getDocument(this.fileUrl)
        const pdf = await loadingTask.promise

        // 清空旧页面
        this.pages = []

        // 循环处理每一页
        for (let i = 1; i <= pdf.numPages; i++) {
          const page = await pdf.getPage(i)
          this.pages.push({
            pageNumber: i,
            page: page
          })

          // 下一轮事件循环渲染，避免阻塞
          await new Promise(resolve => setTimeout(resolve, 0))
        }

        // 渲染所有页面
        this.renderAllPages()
      } catch (error) {
        console.error('PDF渲染错误:', error)
        throw error
      }
    },
    async renderAllPages() {
      for (const item of this.pages) {
        await this.renderPage(item.page, item.pageNumber)
      }
    },

    async renderPage(page, pageNumber) {
      const viewport = page.getViewport({ scale: 1.0 })
      const canvas = this.$refs[`pdfCanvas-${pageNumber}`][0]
      const context = canvas.getContext('2d')

      canvas.height = viewport.height
      canvas.width = viewport.width

      await page.render({
        canvasContext: context,
        viewport: viewport
      }).promise
    }

  }
}
</script>

<style scoped>
.pdf-preview {
  overflow-y: auto;
  max-height: 100vh;
}

canvas {
  display: block;
  margin: 0 auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.pdf-controls {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.8);
  padding: 5px;
  border-radius: 4px;
}
</style>
